<script>
export default {
  name: "customDirectives",
  data(){
    return {
      redd:'green',
      val:'',
      yel:'yellow'
    }
  },
  methods:{},

  // 私有定义
  directives:{
     //   起名的的时候不要用驼峰命名法，用—     //   ownFs20  own-fs20
    //   （1）第一种写法  相当于只有bind方法
    'own-fs20'(el,binding){
      console.log(el,'私有定义el')
      console.log(binding,'私有定义binding')
      el.focus()   //不执行
    },
    //   （2）第二种写法
    'own-fs40':{
      // bind(el,binding){},
      // inserted(el){},
      // update(el){}
    }

  }
}
</script>

<template>
<div>
  自定义指令
  <div v-color="redd">文本内容</div>
  <div v-color="yel">文本内容黄色</div>
  <input type="text" v-model="val" v-color="redd">

  <div v-own-fs20>这是文本</div>
  <input type="text" v-model="val" v-own-fs20>
  <input type="text" v-model="val" v-own-fs40>
</div>
</template>

<style scoped lang="less">

</style>